<template>
  <div class="menu">
    <page-content
      ref="pageContentRef"
      :content-config="contentConfig"
      @add-new-click="handleAddNewClick(relatedCb(false))"
    >
      <template #createAt="scope">{{ formatUTC(scope.row[scope.prop]) }}</template>
      <template #updateAt="scope">{{ formatUTC(scope.row[scope.prop]) }}</template>
      <template #menuType="scope">{{ formatType(scope.row[scope.prop]) }}</template>
      <template #status="scope">
        <el-switch
          v-if="scope.row.menuType == 3"
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
          v-model="scope.row[scope.prop]"
          :active-value="1"
          :inactive-value="0"
          :before-change="handleBeforeSwitchChange"
          @change="handleSwitchChange(scope.row)"
        />
        <p v-else>无</p>
      </template>
      <template #hide="scope">
        <p v-if="scope.row.menuType == 2">{{ scope.row[scope.prop] ? '隐藏' : '显示' }}</p>
        <p v-else>无</p>
      </template>

      <template #action="scope">
        <el-button
          class="action-btn"
          text
          type="primary"
          size="small"
          icon="Edit"
          @click="handleEditClick(scope.row, relatedCb(scope.row))"
        >
          编辑
        </el-button>

        <el-popconfirm title="确定要删除吗？" @confirm="handleDeleteClick(scope.row)">
          <template #reference>
            <el-button class="action-btn" text type="danger" size="small" icon="Delete">
              删除
            </el-button>
          </template>
        </el-popconfirm>
      </template>
    </page-content>

    <page-model
      @related="getSelectVal"
      :model-config="modelConfig"
      :page-name="contentConfig.pageName"
      ref="pageModelRef"
      @update-page-data="handleUpdatePageData"
    />
  </div>
</template>

<script setup lang="ts" name="menu">
import PageContent from '@/components/page-content/page-content.vue'
import PageModel from '@/components/page-model/page-model.vue'

import contentConfig from './config/content.config'
import modelConfig from './config/model.config'

import usePageContent from '@/hooks/usePageContent'
import usePageModel from '@/hooks/usePageModel'

import useSystemStore from '@/stores/main/system/system'

import { formatUTC, formatType } from '@/utils/format'
import { reactive } from 'vue'
// - store
const systemStore = useSystemStore()

// - hooks
const { pageContentRef, handleUpdatePageData, handleDeleteClick, handleSwitchClick } =
  usePageContent()
const { pageModelRef, handleAddNewClick, handleEditClick } = usePageModel()

//启用、停止状态
const switchState = reactive({
  switchStatus: false // 用于解决el-switch初始化会执行change事件
})

const handleBeforeSwitchChange = () => {
  switchState.switchStatus = true
  return switchState.switchStatus
}

const handleSwitchChange = (item) => {
  if (switchState.switchStatus) {
    handleSwitchClick(item)
  }
}

const relatedCb = (res: any) => {
  modelConfig.formItems.map((element: any) => {
    if (element.prop === 'pid') {
      element.options = []
    }
  })
  if (res.id) {
    //编辑
    modelConfig.formItems.map((element: any) => {
      if (element.prop === 'pid') {
        element.options = [{ id: 0, name: ' ' }]
      }
      if (element.prop === 'hide') {
        element.initialValue = 0
      }
    })
    systemStore.originalList.map((item: any) => {
      if (res.menuType == item.menuType + 1) {
        modelConfig.formItems.map((element: any) => {
          if (element.prop === 'pid') {
            element.options.push(item)
          }
        })
      }
    })
  }
}

//select选择改变
const getSelectVal = (payload: number) => {
  //不选择菜单，隐藏选项
  modelConfig.formItems.map((element: any) => {
    if (element.prop === 'pid') {
      element.options = []
    }
  })
  systemStore.originalList.map((item: any) => {
    if (payload == item.menuType + 1) {
      modelConfig.formItems.map((element: any) => {
        if (element.prop === 'pid') {
          element.options.push(item)
        }
      })
    }
  })
}
</script>

<style scoped lang="less">
.menu {
}
</style>
